<template>
  <div class="Problem">
    <section class="toolTop">
      <el-form :inline="true" class="demo-form-inline">
        <el-row :gutter="35" class="inwrap">
          <el-col :span="4">
            <el-form-item class="title"></el-form-item>
          </el-col>
          <el-col :span="24" class="rightCol">
            <div>
              <el-radio-group v-model="currentTab" size="mini">
                <el-radio-button
                  v-for="item in tabList"
                  v-bind:label="item.action"
                  v-bind:key="item.action"
                >{{item.name}}</el-radio-button>
              </el-radio-group>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </section>
    <section class="main">
      <router-view v-bind:currentTab="currentTab"></router-view>
    </section>
  </div>
</template>

<script type="text/javascript" src="../../api/dashboardmg/problem.js"></script>

<style lang="scss">
.Problem {
  flex: 1;
  > section {
    margin-top: 16px;
    &.toolTop {
      padding: 8px 24px;
      border-radius: 5px;
      //background-color: #ffffff;
      .inwrap {
        display: flex;
        align-items: center;
      }
      h1 {
        font-size: 21px;
        font-weight: 100;
      }
      .rightCol {
        display: flex;
        justify-content: flex-end;
      }
      .el-form-item {
        padding: 0 8px;
        margin: 0;
      }
      .el-radio-button--mini .el-radio-button__inner {
        padding: 7px 15px;
        font-size: 16px;
        color: #85899c;
        border-color: #85899c;
        background-color: #161836;
        height: 35px;
        line-height: 20px;
      }
      .el-radio-button__orig-radio:checked + .el-radio-button__inner {
        background-color: #44abf5;
        border-color: #44abf5;
        color: #ffffff;
        box-shadow: -1px 0 0 0 #44abf5;
      }
    }
    &.main {
      margin-top: -2%;
      border-radius: 5px;
      padding: 24px;
      margin-bottom: 16px;
      //background-color: #ffffff;
    }
  }
}
</style>
